<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建虚拟dom</title>
</head>
<body>
    <div id="root">
        <div>
            <div>hello1</div>
            <div>hello2</div>
            <div>hello3</div>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </div>

    <div id="realdom"></div>

    <script>
        // 生成单个虚拟dom
        class Vnode{
            constructor(tag, data, value, type) {
                this.tag = tag && tag.toLowerCase();
                this.data = data;
                this.value = value;
                this.type = type;
                this.children = [];
            }

            appendChild(vnode) {
                this.children.push(vnode);
            }
        }
        // 生成虚拟dom
        function getVnode(node) {
            const nodeType = node.nodeType;
            let _vNode = null;
            if (nodeType === 1) {
                const tagName = node.nodeName;
                let data = {};
                const attrs = node.attributes;
                for (let index = 0; index < attrs.length; index++) {
                    data[attrs[index].nodeName] = attrs[index].nodeValue;
                }
                _vNode = new Vnode(tagName, data, undefined, nodeType);
                let childNodes = node.childNodes;
                for (let i = 0; i < childNodes.length; i++) {
                    _vNode.appendChild(getVnode(childNodes[i]));
                }
            } else {
                _vNode = new Vnode(undefined, undefined, node.nodeValue, nodeType);
            }
            return _vNode;
        }
        // 生成真实 dom
        function parseVnode(vNode) {
            let tag = vNode.tag;
            let type = vNode.type;
            let attrs = vNode.data;
            let children = vNode.children;
            let value = vNode.value;
            let _realDom = null;
            if (type === 1) {
                let el = document.createElement(tag);
                let props = Object.keys(attrs);
                let prop;
                while (prop = props.shift()) {
                    el.setAttribute(prop, attrs[prop]);
                }
                if (children.length) {
                    for (let i = 0; i < children.length; i++) {
                        el.appendChild(parseVnode(children[i]));
                    }
                }
                _realDom = el;
            } else {
                let textNode = document.createTextNode(value);
                _realDom = textNode;
            }
            return _realDom;
        }

        const root = document.getElementById('root');
        let vRoot = getVnode(root);
        console.log(vRoot);

        let realdom = document.getElementById('realdom');
        let _realDom = parseVnode(vRoot);
        realdom.appendChild(_realDom);
        console.log('_realDom', _realDom);
    </script>
</body>
</html>